Làm Chủ CSS View Transitions: Phân Tích Sâu về Tạo Kiểu Pseudo-Element

Trong bối cảnh phát triển web không ngừng thay đổi, việc theo đuổi một trải nghiệm người dùng liền mạch, mượt mà và hấp dẫn là một mục tiêu không đổi. Trong nhiều năm, các nhà phát triển đã nỗ lực thu hẹp khoảng cách giữa web và các ứng dụng gốc, đặc biệt là về độ mượt của các hiệu ứng chuyển trang. Việc điều hướng web truyền thống thường dẫn đến việc tải lại toàn bộ trang một cách đột ngột—một màn hình trắng xóa tạm thời làm gián đoạn sự tập trung của người dùng. Các Ứng dụng Trang đơn (SPA) đã giảm thiểu điều này, nhưng việc tạo ra các hiệu ứng chuyển tiếp tùy chỉnh, có ý nghĩa vẫn là một nhiệm vụ phức tạp và thường dễ gặp lỗi, phụ thuộc nhiều vào các thư viện JavaScript và quản lý trạng thái phức tạp.

Và đây là lúc API CSS View Transitions xuất hiện, một công nghệ đột phá sẵn sàng cách mạng hóa cách chúng ta xử lý các thay đổi giao diện người dùng trên web. API mạnh mẽ này cung cấp một cơ chế đơn giản nhưng vô cùng linh hoạt để tạo hoạt ảnh giữa các trạng thái DOM khác nhau, giúp việc tạo ra những trải nghiệm tinh tế, giống như ứng dụng mà người dùng mong đợi trở nên dễ dàng hơn bao giờ hết. Trọng tâm sức mạnh của API này là một tập hợp các pseudo-element CSS mới. Đây không phải là các bộ chọn thông thường; chúng là các phần tử động, tạm thời được trình duyệt tạo ra để cho phép bạn kiểm soát chi tiết từng giai đoạn của một hiệu ứng chuyển tiếp. Hướng dẫn này sẽ đưa bạn đi sâu vào cây pseudo-element này, khám phá cách tạo kiểu cho từng thành phần để xây dựng các hoạt ảnh đẹp mắt, hiệu suất cao và dễ tiếp cận cho khán giả toàn cầu.

Cấu trúc của một View Transition

Trước khi chúng ta có thể tạo kiểu cho một hiệu ứng chuyển tiếp, chúng ta phải hiểu những gì xảy ra bên dưới khi nó được kích hoạt. Khi bạn khởi tạo một view transition (ví dụ, bằng cách gọi document.startViewTransition()), trình duyệt sẽ thực hiện một loạt các bước:

• Chụp Trạng thái Cũ: Trình duyệt chụp một "ảnh màn hình" của trạng thái trang hiện tại.
• Cập nhật DOM: Mã của bạn sau đó thực hiện các thay đổi đối với DOM (ví dụ: điều hướng đến một khung nhìn mới, thêm hoặc xóa các phần tử).
• Chụp Trạng thái Mới: Khi cập nhật DOM hoàn tất, trình duyệt sẽ chụp ảnh màn hình của trạng thái mới.
• Xây dựng Cây Pseudo-Element: Trình duyệt sau đó xây dựng một cây pseudo-element tạm thời trong lớp phủ của trang. Cây này chứa các hình ảnh đã chụp của trạng thái cũ và mới.
• Tạo Hoạt ảnh: Các hoạt ảnh CSS được áp dụng cho các pseudo-element này, tạo ra một sự chuyển đổi mượt mà từ trạng thái cũ sang trạng thái mới. Mặc định là hiệu ứng mờ chéo (cross-fade) đơn giản.
• Dọn dẹp: Khi các hoạt ảnh hoàn tất, cây pseudo-element sẽ bị xóa và người dùng có thể tương tác với DOM mới, trực tiếp.

Chìa khóa để tùy chỉnh chính là cây pseudo-element tạm thời này. Hãy coi nó như một tập hợp các lớp trong một công cụ thiết kế, được đặt tạm thời lên trên trang của bạn. Bạn có toàn quyền kiểm soát CSS đối với các lớp này. Đây là cấu trúc bạn sẽ làm việc với:

• ::view-transition
  • ::view-transition-group(*)
    • ::view-transition-image-pair(*)
      • ::view-transition-old(*)
      • ::view-transition-new(*)

Hãy cùng phân tích xem mỗi pseudo-element này đại diện cho điều gì.

Các "Diễn viên" Pseudo-Element

::view-transition: Đây là gốc của toàn bộ cấu trúc. Nó là một phần tử duy nhất lấp đầy khung nhìn (viewport) và nằm trên tất cả nội dung khác của trang. Nó hoạt động như một vùng chứa cho tất cả các nhóm chuyển tiếp và là nơi tuyệt vời để thiết lập các thuộc tính chuyển tiếp tổng thể như thời lượng hoặc hàm thời gian (timing function).

::view-transition-group(*): Đối với mỗi phần tử chuyển tiếp riêng biệt (được xác định bởi thuộc tính CSS view-transition-name), một nhóm sẽ được tạo. Pseudo-element này chịu trách nhiệm tạo hoạt ảnh cho vị trí và kích thước của nội dung bên trong nó. Nếu bạn có một thẻ di chuyển từ một bên màn hình sang bên kia, thì chính ::view-transition-group mới là thứ thực sự đang di chuyển.

::view-transition-image-pair(*): Nằm bên trong nhóm, phần tử này hoạt động như một vùng chứa và một mặt nạ cắt (clipping mask) cho các khung nhìn cũ và mới. Vai trò chính của nó là duy trì các hiệu ứng như border-radius hoặc transform trong suốt quá trình hoạt ảnh và xử lý hoạt ảnh mờ chéo mặc định.

::view-transition-old(*): Phần tử này đại diện cho "ảnh màn hình" hoặc chế độ xem được kết xuất của phần tử ở trạng thái cũ (trước khi thay đổi DOM). Theo mặc định, nó tạo hoạt ảnh từ opacity: 1 đến opacity: 0.

::view-transition-new(*): Phần tử này đại diện cho "ảnh màn hình" hoặc chế độ xem được kết xuất của phần tử ở trạng thái mới (sau khi thay đổi DOM). Theo mặc định, nó tạo hoạt ảnh từ opacity: 0 đến opacity: 1.

Gốc: Tạo Kiểu cho Pseudo-Element ::view-transition

Pseudo-element ::view-transition là bức vẽ mà trên đó toàn bộ hoạt ảnh của bạn được thể hiện. Là vùng chứa cấp cao nhất, đây là nơi lý tưởng để xác định các thuộc tính nên được áp dụng chung cho hiệu ứng chuyển tiếp. Theo mặc định, trình duyệt cung cấp một bộ hoạt ảnh, nhưng bạn có thể dễ dàng ghi đè chúng.

Ví dụ, hiệu ứng chuyển tiếp mặc định là một hiệu ứng mờ chéo kéo dài 250 mili giây. Nếu bạn muốn thay đổi điều này cho mọi hiệu ứng chuyển tiếp trên trang web của mình, bạn có thể nhắm mục tiêu vào pseudo-element gốc:

::view-transition {

  animation-duration: 500ms;

  animation-timing-function: ease-in-out;

}

Quy tắc đơn giản này giờ đây làm cho tất cả các hiệu ứng mờ dần mặc định của trang mất gấp đôi thời gian và sử dụng đường cong 'ease-in-out', mang lại cho chúng một cảm giác hơi khác. Mặc dù bạn có thể áp dụng các hoạt ảnh phức tạp ở đây, nhưng nó thường được sử dụng tốt nhất để xác định thời gian và easing phổ quát, để các pseudo-element cụ thể hơn xử lý các chi tiết hoạt cảnh.

Nhóm và Đặt tên: Sức mạnh của `view-transition-name`

Ngay từ đầu, không cần thêm bất kỳ công việc nào, API View Transition cung cấp hiệu ứng mờ chéo cho toàn bộ trang. Điều này được xử lý bởi một nhóm pseudo-element duy nhất cho gốc. Sức mạnh thực sự của API được mở khóa khi bạn muốn chuyển tiếp các phần tử cụ thể, riêng lẻ giữa các trạng thái. Ví dụ, làm cho một hình ảnh thu nhỏ của sản phẩm trên trang danh sách phát triển và di chuyển liền mạch vào vị trí hình ảnh sản phẩm chính trên trang chi tiết.

Để cho trình duyệt biết rằng hai phần tử ở các trạng thái DOM khác nhau về mặt khái niệm là một, bạn sử dụng thuộc tính CSS view-transition-name. Thuộc tính này phải được áp dụng cho cả phần tử bắt đầu và phần tử kết thúc.

/* Trong CSS của trang danh sách */

.product-thumbnail {

  view-transition-name: product-image;

}

/* Trong CSS của trang chi tiết */

.main-product-image {

  view-transition-name: product-image;

}

Bằng cách đặt cho cả hai phần tử cùng một tên duy nhất ('product-image' trong trường hợp này), bạn hướng dẫn trình duyệt: "Thay vì chỉ làm mờ trang cũ và hiện trang mới, hãy tạo một hiệu ứng chuyển tiếp đặc biệt cho phần tử cụ thể này." Trình duyệt bây giờ sẽ tạo ra một ::view-transition-group(product-image) chuyên dụng để xử lý hoạt ảnh của nó một cách riêng biệt so với hiệu ứng mờ của gốc. Đây là khái niệm cơ bản cho phép hiệu ứng chuyển tiếp phổ biến "biến hình" (morphing) hoặc "phần tử dùng chung" (shared element).

Lưu ý quan trọng: Tại bất kỳ thời điểm nào trong quá trình chuyển tiếp, một view-transition-name phải là duy nhất. Bạn không thể có hai phần tử hiển thị có cùng tên cùng một lúc.

Tạo Kiểu Chuyên sâu: Các Pseudo-Element Cốt lõi

Với các phần tử đã được đặt tên, giờ đây chúng ta có thể đi sâu vào việc tạo kiểu cho các pseudo-element cụ thể mà trình duyệt tạo ra cho chúng. Đây là nơi bạn có thể tạo ra các hoạt ảnh thực sự tùy chỉnh và biểu cảm.

`::view-transition-group(name)`: Kẻ Di chuyển

Trách nhiệm duy nhất của nhóm là chuyển đổi từ kích thước và vị trí của phần tử cũ sang kích thước và vị trí của phần tử mới. Nó không chứa hình thức thực tế của nội dung, chỉ có hộp giới hạn (bounding box) của nó. Hãy coi nó như một khung di động.

Theo mặc định, trình duyệt tạo hoạt ảnh cho các thuộc tính transform và width/height của nó. Bạn có thể ghi đè điều này để tạo ra các hiệu ứng khác nhau. Ví dụ, bạn có thể thêm một vòng cung vào chuyển động của nó bằng cách tạo hoạt ảnh theo một đường cong, hoặc làm cho nó phóng to và thu nhỏ trong suốt hành trình.

::view-transition-group(product-image) {

  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

}

Trong ví dụ này, chúng tôi đang áp dụng một hàm easing cụ thể chỉ cho chuyển động của hình ảnh sản phẩm, làm cho nó cảm thấy năng động và vật lý hơn, mà không ảnh hưởng đến hiệu ứng mờ mặc định của phần còn lại của trang.

`::view-transition-image-pair(name)`: Kẻ Cắt và Làm mờ

Nằm bên trong nhóm di chuyển, image-pair chứa các khung nhìn cũ và mới. Nó hoạt động như một mặt nạ cắt, vì vậy nếu phần tử của bạn có border-radius, image-pair đảm bảo rằng nội dung vẫn được cắt theo bán kính đó trong suốt quá trình hoạt ảnh về kích thước và vị trí. Công việc chính khác của nó là điều phối hiệu ứng mờ chéo mặc định giữa nội dung cũ và mới.

Bạn có thể muốn tạo kiểu cho phần tử này để đảm bảo tính nhất quán về mặt hình ảnh hoặc để tạo ra các hiệu ứng nâng cao hơn. Một thuộc tính quan trọng cần xem xét là isolation: isolate. Điều này rất quan trọng nếu bạn có kế hoạch sử dụng các hiệu ứng mix-blend-mode nâng cao trên các phần tử con (cũ và mới), vì nó tạo ra một ngữ cảnh xếp chồng mới và ngăn chặn việc hòa trộn ảnh hưởng đến các phần tử bên ngoài nhóm chuyển tiếp.

::view-transition-image-pair(product-image) {

  isolation: isolate;

}

`::view-transition-old(name)` và `::view-transition-new(name)`: Những Ngôi sao của Chương trình

Đây là các pseudo-element đại diện cho hình thức trực quan của phần tử của bạn trước và sau khi thay đổi DOM. Đây là nơi hầu hết công việc hoạt ảnh tùy chỉnh của bạn sẽ diễn ra. Theo mặc định, trình duyệt chạy một hoạt ảnh mờ chéo đơn giản trên chúng bằng cách sử dụng opacity và mix-blend-mode. Để tạo một hoạt ảnh tùy chỉnh, trước tiên bạn phải tắt hoạt ảnh mặc định.

::view-transition-old(name),

::view-transition-new(name) {

  animation: none;

}

Một khi hoạt ảnh mặc định bị vô hiệu hóa, bạn có thể tự do áp dụng hoạt ảnh của riêng mình. Hãy khám phá một vài mẫu phổ biến.

Hoạt ảnh Tùy chỉnh: Trượt

Thay vì hiệu ứng mờ chéo, hãy làm cho nội dung của một vùng chứa trượt vào. Ví dụ, khi điều hướng giữa các bài viết, chúng tôi muốn văn bản của bài viết mới trượt vào từ bên phải trong khi văn bản cũ trượt ra bên trái.

Đầu tiên, xác định các keyframes:

@keyframes slide-from-right {

  from { transform: translateX(100%); }

  to { transform: translateX(0); }

}

@keyframes slide-to-left {

  from { transform: translateX(0); }

  to { transform: translateX(-100%); }

}

Bây giờ, áp dụng các hoạt ảnh này cho các pseudo-element cũ và mới cho phần tử có tên 'article-content'.

::view-transition-old(article-content) {

  animation: 300ms ease-out forwards slide-to-left;

}

::view-transition-new(article-content) {

  animation: 300ms ease-out forwards slide-from-right;

}

Hoạt ảnh Tùy chỉnh: Lật 3D

Để có hiệu ứng ấn tượng hơn, bạn có thể tạo hiệu ứng lật thẻ 3D. Điều này đòi hỏi phải tạo hoạt ảnh cho thuộc tính transform với rotateY và cũng phải quản lý backface-visibility.

/* Nhóm cần một ngữ cảnh 3D */

::view-transition-group(card-flipper) {

  transform-style: preserve-3d;

}

/* image-pair cũng cần bảo tồn ngữ cảnh 3D */

::view-transition-image-pair(card-flipper) {

  transform-style: preserve-3d;

}

/* Khung nhìn cũ lật từ 0 đến -180 độ */

::view-transition-old(card-flipper) {

  animation: 600ms ease-in forwards flip-out;

  backface-visibility: hidden;

}

/* Khung nhìn mới lật từ 180 đến 0 độ */

::view-transition-new(card-flipper) {

  animation: 600ms ease-out forwards flip-in;

  backface-visibility: hidden;

}

@keyframes flip-out {

  from { transform: rotateY(0deg); }

  to { transform: rotateY(-180deg); }

}

@keyframes flip-in {

  from { transform: rotateY(180deg); }

  to { transform: rotateY(0deg); }

}

Ví dụ Thực tế và Kỹ thuật Nâng cao

Lý thuyết rất hữu ích, nhưng ứng dụng thực tế mới là nơi chúng ta thực sự học hỏi. Hãy cùng xem qua một số kịch bản phổ biến và cách giải quyết chúng bằng các pseudo-element của view transition.

Ví dụ: Hình thu nhỏ Thẻ "Biến hình"

Đây là hiệu ứng chuyển tiếp phần tử dùng chung kinh điển. Hãy tưởng tượng một thư viện các hồ sơ người dùng. Mỗi hồ sơ là một thẻ có hình đại diện. Khi bạn nhấp vào một thẻ, bạn điều hướng đến một trang chi tiết nơi chính hình đại diện đó được hiển thị nổi bật ở trên cùng.

Bước 1: Gán Tên

Trong trang thư viện của bạn, hình ảnh đại diện được đặt một cái tên. Tên này phải là duy nhất cho mỗi thẻ, ví dụ, dựa trên ID của người dùng.

/* Trong gallery-item.css */

.card-avatar { view-transition-name: avatar-user-123; }

Trên trang chi tiết hồ sơ, hình đại diện lớn ở đầu trang được đặt cùng một tên chính xác.

/* Trong profile-page.css */

.profile-header-avatar { view-transition-name: avatar-user-123; }

Bước 2: Tùy chỉnh Hoạt ảnh

Theo mặc định, trình duyệt sẽ di chuyển và thay đổi kích thước hình đại diện, nhưng nó cũng sẽ làm mờ chéo nội dung. Nếu hình ảnh giống hệt nhau, hiệu ứng mờ này là không cần thiết và có thể gây ra một chút nhấp nháy. Chúng ta có thể vô hiệu hóa nó.

/* Dấu sao (*) ở đây là một ký tự đại diện cho bất kỳ nhóm nào có tên */

::view-transition-image-pair(*) {

  /* Vô hiệu hóa hiệu ứng mờ mặc định */

  animation-duration: 0s;

}

Khoan đã, nếu chúng ta vô hiệu hóa hiệu ứng mờ, làm thế nào nội dung chuyển đổi? Đối với các phần tử dùng chung mà khung nhìn cũ và mới giống hệt nhau, trình duyệt đủ thông minh để chỉ sử dụng một khung nhìn cho toàn bộ quá trình chuyển tiếp. `image-pair` về cơ bản chỉ giữ một hình ảnh, vì vậy việc vô hiệu hóa hiệu ứng mờ chỉ đơn giản là tiết lộ sự tối ưu hóa này. Đối với các phần tử mà nội dung thực sự thay đổi, bạn sẽ cần một hoạt ảnh tùy chỉnh thay cho hiệu ứng mờ mặc định.

Xử lý Thay đổi Tỷ lệ Khung hình

Một thách thức phổ biến phát sinh khi một phần tử chuyển tiếp thay đổi tỷ lệ khung hình của nó. Ví dụ, một hình thu nhỏ ngang 16:9 trên trang danh sách có thể chuyển thành một hình đại diện vuông 1:1 trên trang chi tiết. Hành vi mặc định của trình duyệt là tạo hoạt ảnh cho chiều rộng và chiều cao một cách độc lập, dẫn đến hình ảnh bị méo hoặc giãn trong quá trình chuyển tiếp.

Giải pháp rất tinh tế. Chúng ta để ::view-transition-group xử lý thay đổi kích thước và vị trí, nhưng chúng ta ghi đè kiểu dáng của các hình ảnh cũ và mới bên trong nó.

Mục tiêu là làm cho các "ảnh màn hình" cũ và mới lấp đầy vùng chứa của chúng mà không bị biến dạng. Chúng ta có thể làm điều này bằng cách đặt chiều rộng và chiều cao của chúng thành 100% và cho phép thuộc tính object-fit mặc định của trình duyệt (được kế thừa từ phần tử gốc) xử lý việc co giãn một cách chính xác.

::view-transition-old(hero-image),

::view-transition-new(hero-image) {

  /* Ngăn chặn biến dạng bằng cách lấp đầy vùng chứa */

  width: 100%;

  height: 100%;

  

  /* Ghi đè hiệu ứng mờ chéo mặc định để thấy hiệu ứng rõ ràng */

  animation: none;

}

Với CSS này, `image-pair` sẽ tạo hoạt ảnh cho tỷ lệ khung hình của nó một cách mượt mà, và các hình ảnh bên trong sẽ được cắt hoặc thêm viền đen (tùy thuộc vào giá trị `object-fit` của chúng) một cách chính xác, giống như trong một vùng chứa bình thường. Sau đó, bạn có thể thêm các hoạt ảnh tùy chỉnh của riêng mình, như hiệu ứng mờ chéo, lên trên hình dạng đã được sửa lỗi này.

Gỡ lỗi và Hỗ trợ Trình duyệt

Tạo kiểu cho các phần tử chỉ tồn tại trong một phần nhỏ của giây có thể khó khăn. May mắn thay, các trình duyệt hiện đại cung cấp các công cụ phát triển tuyệt vời cho việc này. Trong Chrome hoặc Edge DevTools, bạn có thể vào bảng "Animations", và khi bạn kích hoạt một view transition, bạn có thể tạm dừng nó. Với hoạt ảnh đã tạm dừng, bạn có thể sử dụng bảng "Elements" để kiểm tra toàn bộ cây pseudo-element `::view-transition` giống như bất kỳ phần nào khác của DOM. Bạn có thể thấy các kiểu đang được áp dụng và thậm chí sửa đổi chúng trong thời gian thực để hoàn thiện hoạt ảnh của mình.

Tính đến cuối năm 2023, API View Transitions được hỗ trợ trong các trình duyệt dựa trên Chromium (Chrome, Edge, Opera). Việc triển khai đang được tiến hành cho Firefox và Safari. Điều này làm cho nó trở thành một ứng cử viên hoàn hảo cho cải tiến tăng dần (progressive enhancement). Người dùng với các trình duyệt được hỗ trợ sẽ có một trải nghiệm nâng cao, thú vị, trong khi người dùng trên các trình duyệt khác sẽ có điều hướng tức thời, tiêu chuẩn. Bạn có thể kiểm tra hỗ trợ trong CSS:

@supports (view-transition: none) {

  /* Tất cả các kiểu view-transition sẽ nằm ở đây */

  ::view-transition-old(my-element) { ... }

}

Các Phương pháp Tốt nhất cho Khán giả Toàn cầu

Khi triển khai hoạt ảnh, điều quan trọng là phải xem xét đến sự đa dạng của người dùng và thiết bị trên toàn thế giới.

Hiệu suất: Hoạt ảnh phải nhanh và mượt. Hãy bám sát vào việc tạo hoạt ảnh cho các thuộc tính CSS mà trình duyệt xử lý ít tốn kém, chủ yếu là transform và opacity. Việc tạo hoạt ảnh cho các thuộc tính như width, height, hoặc margin có thể kích hoạt việc tính toán lại bố cục trên mỗi khung hình, dẫn đến giật lag và trải nghiệm kém, đặc biệt là trên các thiết bị có cấu hình thấp hơn.

Khả năng tiếp cận: Một số người dùng bị say tàu xe hoặc khó chịu với các hoạt ảnh. Tất cả các hệ điều hành chính đều cung cấp một tùy chọn người dùng để giảm chuyển động. Chúng ta phải tôn trọng điều này. Truy vấn media prefers-reduced-motion cho phép bạn vô hiệu hóa hoặc đơn giản hóa hoạt ảnh của mình cho những người dùng này.

@media (prefers-reduced-motion: reduce) {

  ::view-transition-group(*),

  ::view-transition-old(*),

  ::view-transition-new(*) {

    /* Bỏ qua tất cả các hoạt ảnh tùy chỉnh và sử dụng một hiệu ứng mờ nhanh, đơn giản */

    animation: none !important;

  }

}

Trải nghiệm Người dùng (UX): Các hiệu ứng chuyển tiếp tốt đều có mục đích. Chúng nên hướng sự chú ý của người dùng và cung cấp bối cảnh về sự thay đổi đang diễn ra trong giao diện người dùng. Một hoạt ảnh quá chậm có thể làm cho ứng dụng cảm thấy ì ạch, trong khi một hoạt ảnh quá lòe loẹt có thể gây mất tập trung. Hãy nhắm đến thời lượng chuyển tiếp trong khoảng từ 200ms đến 500ms. Mục tiêu là để hoạt ảnh được cảm nhận nhiều hơn là được nhìn thấy.

Kết luận: Tương lai là Sự Mượt mà

API CSS View Transitions, và đặc biệt là cây pseudo-element mạnh mẽ của nó, đại diện cho một bước tiến vượt bậc cho giao diện người dùng web. Nó cung cấp cho các nhà phát triển một bộ công cụ gốc, hiệu suất cao và có khả năng tùy biến cao để tạo ra các loại chuyển đổi trạng thái, mượt mà mà trước đây chỉ có ở các ứng dụng gốc. Bằng cách hiểu vai trò của ::view-transition, ::view-transition-group, và cặp hình ảnh cũ/mới, bạn có thể vượt ra ngoài các hiệu ứng mờ đơn giản và dàn dựng các hoạt ảnh phức tạp, có ý nghĩa giúp tăng cường khả năng sử dụng và làm hài lòng người dùng.

Khi hỗ trợ trình duyệt mở rộng, API này sẽ trở thành một phần thiết yếu trong bộ công cụ của nhà phát triển front-end hiện đại. Bằng cách nắm bắt các khả năng của nó và tuân thủ các phương pháp tốt nhất về hiệu suất và khả năng tiếp cận, chúng ta có thể xây dựng một trang web không chỉ chức năng hơn mà còn đẹp hơn và trực quan hơn cho mọi người, ở mọi nơi.